<template>
  <div class="login-content">
    <div class="login-box">
      <div class="login-input">
        <div class="login-title">漫研社后台管理系统</div>
        <n-input
          type="text"
          placeholder="手机号"
          size="large"
          v-model="mobile"
          :on-input="moblieChange"
        />
        <div class="login-divd"></div>
        <n-input
          type="password"
          show-password-on="mousedown"
          placeholder="密码"
          size="large"
          v-model="password"
          :on-input="passwordChange"
        />
        <div class="login-btn">
          <n-button ghost text-color="white" @click="login">
            登 录
          </n-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {Login} from '../../api/api.ts'
import {ref,Ref} from 'vue'
import { useRouter } from "vue-router";
const router = useRouter()
const mobile:Ref<string> = ref("")
const password:Ref<string> = ref("")

const moblieChange = (value:string) => {
  mobile.value = value
}

const passwordChange = (value:string) => {
  password.value = value
}

const login = async () => {
  if(mobile.value.length != 11){
    window.$message.warning("手机号必需11位")
    return
  }
  const data:any = await Login({
    username: mobile.value,
    password: password.value
  })
  if(data.state == "OK"){
    if(data.is_superuser){
      window.$message.success("登录成功")
      sessionStorage.setItem("token", mobile.value)
      router.push("/home")
    }else{
      window.$message.warning("您不是管理员用户")
    }
  }else{
    window.$message.error(data.tip)
  }
}
  
</script>

<style lang="scss" scoped>
  .login-content{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-box{
      width: 500px;
      min-height: 350px;
      border: 1px solid rgba(0,255,255,0.7);
      // background-color: #303133;
      opacity: 0.7;
      box-shadow: 0 2px 12px 0 rgba(0,255,255,0.7);

      .login-input{
        margin: 40px;

        .login-title{
          color: white;
          font-size: 30px;
          text-align: center;
          margin: 0 0 30px 0;
        }

        .login-divd{
          height: 40px;
        }

        .login-btn{
          margin-top: 30px;
          text-align: center;
        }
      }
    }
  }
</style>